<template>
    <div v-loading="loading">
        <div class="mb10 select-line">
            <el-radio-group v-model="data_type" v-if="false">
                <el-radio-button :label="1">图形展示</el-radio-button>
                <el-radio-button :label="2">表格展示</el-radio-button>
            </el-radio-group>
            <div class="ml10" v-if="true">
                <span class="down-execel">
                    <Poptip v-model="showFilter" placement="bottom-end">
                        <i class="el-icon-search poptip-condition-add"></i>
                        <a href="javascript:;" class='poptip-condition-add'>列表查找</a>
                        <div slot="content">
                            <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                                <i class="el-icon-plus"></i>
                                <a href="javascript:;">添加过滤条件</a>
                                <div slot="content">
                                    <ul>
                                        <li
                                            v-for="(item, index) in selectHead"
                                            :key="index"
                                            class='poptip-condition-item'
                                            @click="addFilterCondition(item)">
                                            {{item.label}}
                                        </li>
                                    </ul>
                                </div>
                            </Poptip>
                            <el-form :model="conditionForm" @submit.native.prevent ref="conditionForm" label-width="120px" class="demo-dynamic">
                                <el-form-item
                                    v-for="(condition, index) in conditionForm.condition"
                                    :label="condition.label"
                                    :key="condition.key"
                                    :prop="'condition.' + index + '.value'"
                                    :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}">
                                    <el-select
                                        v-if='condition.label === "代理人"'
                                        v-model="condition.value"
                                        placeholder="请选择代理人"
                                        size="small"
                                        filterable
                                    >
                                        <el-option
                                            v-for="(item, index) in agentOptions"
                                            :key="index"
                                            :label="item | agentNumAddName"
                                            :value="item"
                                        ></el-option>
                                    </el-select>
                                    <el-select
                                        v-else-if='condition.label === "在职/离职"'
                                        v-model="condition.value"
                                        placeholder="请选择在职/离职"
                                        size="small"
                                        filterable
                                    >
                                        <el-option label="在职" value="在职"></el-option>
                                        <el-option label="离职" value="离职"></el-option>
                                    </el-select>
                                    <el-date-picker
                                        v-model="condition.value"
                                        type="daterange"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                        size="small"
                                        :validate-event='false'
                                        v-else-if='condition.label === "时间选择"'>
                                    </el-date-picker>
                                    <el-input v-else size="small" v-model="condition.value"></el-input>
                                    <el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
                                </el-form-item>
                            </el-form>

                            <div class="btns">
                                <el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
                                <el-button @click="resetForm('conditionForm')" size="mini">重置</el-button>
                            </div>
                        </div>
                    </Poptip>
                </span>
            </div>
        </div>
        <div v-if="false" class="first-wrap">
            <div class="top-show">
                <div class="left">
                    <span class="after finish-order mr40">已完成订单</span>
                    <span class="after unfinish-order mr40">接单未完成</span>
                    <span class="after rework-order mr40">返修订单</span>
                    <span class="after time-order">平均耗时</span>
                </div>
                <div class="right">
                    <span class="after reject-rate mr40">驳回率</span>
                    <span class="after rework-rate">返修率</span>
                </div>
            </div>
            <div class="charts-wrap">
                <div class="agent-name-wrap">
                    <div v-for="(item, index) in echartsData" :key="index" class="clip">
                        {{item.name}}
                    </div>
                </div>
                <div class="echarts-container">
                    <template v-for="(item, index) in echartsData">
                        <div :id="'charts' + index" :key="index" class="echarts-item" :data-id="index"></div>
                    </template>
                </div>
            </div>
        </div>
        <div class="table-wrap">

            <el-table
                ref="table"
                :data="tableData"
                border
			    @sort-change='tableSortChange'
            >
                <el-table-column
                    label="代理人"
                    align="left"
                    min-width="100"
                    prop="agent_name"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <span class="unfinish" v-if="scope.row.type == '离职'">{{scope.row.agent_name}}</span>
                        <span class="finish" v-else>{{scope.row.agent_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="上月完成订单(件)"
                    align="center"
                    prop="lastMonthCount"
                    width="155"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    label="本月完成订单(件)"
                    width="155"
                    align="center"
                    prop="thisMonthCount"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    label="已完成订单(件)"
                    width="140"
                    align="center"
                    prop="finishCount"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.finishCount}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="140"
                    label="接单未完成(件)"
                    align="center"
                    prop="noFinish"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.noFinish}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="返修次数(次)"
                    width="130"
                    align="center"
                    prop="reworkCount"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.reworkCount}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="驳回率(%)"
                    align="center"
                    prop="rejectionRate"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.rejectionRate}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="返修率(%)"
                    align="center"
                    prop="repairRate"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.repairRate}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="撤案率(%)"
                    align="center"
                    prop="withdrawalRate"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.withdrawalRate}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="平均耗时(天)"
                    width="130"
                    align="center"
                    prop="day"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        {{scope.row.day}}
                    </template>
                </el-table-column>
            </el-table>
            <pagination @paginationChange="paginateChange" :total="total"></pagination>
        </div>
    </div>
</template>

<script>
import { getSumData } from "~/api/order";
import echarts from 'echarts'
import pagination from '~/components/pagination'
export default {
    components: {
        pagination
    },
    data() {
        return {
            agentOptions: [],
            showFilter: false,
            showFilterCondition: false,
            // 筛选条件
            conditionForm: {
                condition: []
            },
            selectHead: [
                {
                    label: '时间选择',
                    props: 'time'
                },
                {
                    label: '代理人',
                    props: 'agent_name'
                },
                {
                    label: '在职/离职',
                    props: 'type'
                }
            ],
            data_type: 1,
            tableData: [],
            loading: true,
            pre_data: [],
            time: [],
            singleOption: {
                grid: [
                    {x: '2%', y: '15%', width: '68%', height: '80%'},
                    {x2: '2%', y: '15%', width: '20%', height: '80%'}
                ],
                xAxis:[
                    {
                        gridIndex: 0,
                        position: 'top',
                        min: 0,
                        axisLabel: {
                            show: false,
                            formatter: '{value} 单',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 0,
                        position: 'bottom',
                        min: 0,
                        axisLabel: {
                            show: false,
                            formatter: '{value} 天',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        minorTick: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        min: 0,
                        axisLabel: {
                            show: false,
                            formatter: '{value} %',
                            alignWithLabel: true,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        position: 'top',
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        gridIndex: 0,
                        type: 'category',
                        data: [],
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        data: [],
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#CCCCCC',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333333',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '已完成订单',
                        type: 'bar',
                        barGap: '200%',
                        barWidth: 10,
                        data: [],
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: '#0077FF'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '已完成订单({c} 件)'
                        }
                    },
                    {
                        name: '接单未完成',
                        type: 'bar',
                        data: [],
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        barWidth: 10,
                        itemStyle: {
                            color: '#FFAB2E'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '接单未完成({c} 件)'
                        }
                    },
                    {
                        name: '返修订单',
                        type: 'bar',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        barWidth: 10,
                        data: [],
                        itemStyle: {
                            color: '#757D88'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '返修订单({c} 件)'
                        }
                    },
                    {
                        name: '平均耗时',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 0,
                        barWidth: 10,
                        data: [],
                        itemStyle: {
                            color: '#FF2E7C'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '平均耗时({c} 天)'
                        }
                    },
                    {
                        name: '返修率',
                        barGap: '200%',
                        type: 'bar',
                        xAxisIndex: 2,
                        yAxisIndex: 1,
                        barWidth: 10,
                        data: [],
                        itemStyle: {
                            color: '#FF2E7C'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '返修率({c} %)'
                        }
                    },
                    {
                        name: '驳回率',
                        type: 'bar',
                        xAxisIndex: 2,
                        yAxisIndex: 1,
                        barWidth: 10,
                        data: [],
                        itemStyle: {
                            color: '#757D88'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '驳回率({c} %)'
                        }
                    },
                ],
            },
            options: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis:[
                    {
                        position: 'top',
                        axisLabel: {
                            formatter: '{value} 件'
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    {
                        position: 'bottom',
                        axisLabel: {
                            formatter: '{value} 天'
                        },
                        splitLine: {
                            show: false
                        },
                        minorTick: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                ],
                yAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        start: 1,
                        end: 25,
                        yAxisIndex: [0]
                    }
                ],
                series: [
                    {
                        name: '已完成订单',
                        type: 'bar',
                        data: [],
                        barGap: '100%',
                        barWidth: 10,
                        xAxisIndex: 0,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#0077FF'}
                            ]),
                            barBorderRadius: 7,
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        name: '接单未完成',
                        type: 'bar',
                        barWidth: 10,
                        xAxisIndex: 0,
                        data: [],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#0077FF'}
                            ]),
                            barBorderRadius: 7,
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        name: '返修订单',
                        barWidth: 10,
                        type: 'bar',
                        xAxisIndex: 0,
                        data: [],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#0077FF'}
                            ]),
                            barBorderRadius: 7,
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: (a) => {
                                return a.data + '件'
                            }
                        }
                    },
                    {
                        name: '平均耗时',
                        barWidth: 10,
                        type: 'bar',
                        xAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: '#fff'},
                                {offset: 1, color: '#0077FF'}
                            ]),
                            barBorderRadius: 7,
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: (a) => {
                                return a.data + '天'
                            }
                        }
                    },
                ],
            },
            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                    picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date(new Date().getFullYear(), 0);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate(time) {
                    return (
                        time.getTime() - 24 * 60 * 60 * 1000 >
                        Date.now() - 8.64e7
                    )
				},
            },
            searchParams: {},
            sortParams: {},
            current_page: 1,
            per_page: 25,
            total: 0,
        }

    },
    async asyncData({ $axios }) {
        let params = {
            sort_str: 'finishCount',
            sort_order: 'desc'
        }
        let res = await getSumData($axios, params);
        let obj = {
            loading: false
        }
        if (res.data.code == 200) {
            let arr = res.data.data.map(v => v.agent_name)
            obj.pre_data = res.data.data
            obj.tableData = res.data.data
            obj.agentOptions = arr
            obj.total = res.data.page.total
        }
        return obj
    },

    computed: {
        tableHeight() {
            let height = 1000
            if (process.client) {
                height = window.innerHeight - 300
            }
            return height
        },
        charts_data() {
            let obj = Object.assign({}, this.options)
            let finish = [],
                no_finish = [],
                rework_count = [],
                rejection_rate = [],
                repair_rate = [],
                day = [],
                agent = []
            if (this.pre_data.length > 0) {
                agent = this.pre_data.map(v => v.agent_name)
                finish = this.pre_data.map(v => v.finishCount)
                no_finish = this.pre_data.map(v => v.noFinish)
                rework_count = this.pre_data.map(v => v.reworkCount)
                rejection_rate = this.pre_data.map(v => v.rejectionRate)
                repair_rate = this.pre_data.map(v => v.repairRate)
                day = this.pre_data.map(v => v.day)
            }
            obj.yAxis.data = agent.reverse()
            obj.series[0].data = finish.reverse()
            obj.series[1].data = no_finish.reverse()
            obj.series[2].data = rework_count.reverse()
            // obj.series[3].data = rejection_rate.reverse()
            // obj.series[4].data = repair_rate.reverse()
            obj.series[3].data = day.reverse()
            return obj
        },
        echartsData() {
            let max = [this.curMax('finishCount'), this.curMax('noFinish'), this.curMax('reworkCount')].sort((a, b) => a < b ? 1 : -1)
            let maxOrderNum = max[0]
            let maxTime = this.curMax('day')
            let maxTem = [this.curMax('repairRate'), this.curMax('reworkCount')].sort((a, b) => a < b ? 1 : -1)[0]
            let arr = []
            if (this.pre_data.length > 0) {
                for (let i = 0; i < this.pre_data.length; i++) {
                    let option = JSON.parse(JSON.stringify(this.singleOption))
                    let data = this.pre_data[i]
                    let obj = {
                        name: data.agent_name,
                        options: option
                    }
                    obj.options.series[0].data = [data.finishCount]
                    obj.options.series[1].data = [data.noFinish]
                    obj.options.series[2].data = [data.reworkCount]
                    obj.options.series[3].data = [data.day]
                    obj.options.series[4].data = [data.reworkCount]
                    obj.options.series[5].data = [data.repairRate]
                    if (i == 0) {
                        obj.options.xAxis[0].axisLabel.show = true
                    }
                    if (i == (this.pre_data.length - 1)) {
                        obj.options.xAxis[1].axisLabel.show = true
                        obj.options.xAxis[2].axisLabel.show = true
                        obj.options.grid[0]['y'] = '5%'
                        obj.options.grid[1]['y'] = '5%'
                    }
                    obj.options.xAxis[0].max = maxOrderNum
                    obj.options.xAxis[1].max = maxTime
                    obj.options.xAxis[2].max = maxTem < 100 ? (maxTem + 10) : maxTem
                    arr.push(obj)
                }
            }
            return arr
        }
    },

    created() {
    },
    mounted() {
    },

    methods: {
        paginateChange(params) {
            this.per_page = params.perPage
            this.current_page = params.page
            this.getData()
        },
        curMax(value) {
            return Math.max.apply(Math, this.pre_data.map(function(o) {return o[value]}))
        },
        tableSortChange(column) {
            let params = {
                sort_str: column.prop,
            }
            if (column.order == 'ascending') {
                params.sort_order = 'asc'
            } else if (column.order == 'descending') {
                params.sort_order = 'desc'
            } else {
                params = {}
            }
            this.sortParams = params
            this.getData()
        },
        dataOperate() {
            let finish = [],
                no_finish = [],
                rework_count = [],
                rejection_rate = [],
                repair_rate = [],
                day = [],
                agent = []
            if (this.pre_data.length > 0) {
                agent = this.pre_data.map(v => v.agent_name)
                finish = this.pre_data.map(v => v.finishCount)
                no_finish = this.pre_data.map(v => v.noFinish)
                rework_count = this.pre_data.map(v => v.reworkCount)
                rejection_rate = this.pre_data.map(v => v.rejectionRate)
                repair_rate = this.pre_data.map(v => v.repairRate)
                day = this.pre_data.map(v => v.day)
            }
            this.options.yAxis.data = agent.reverse()
            this.options.series[0].data = finish.reverse()
            this.options.series[1].data = no_finish.reverse()
            this.options.series[2].data = rework_count.reverse()
            this.options.series[3].data = day.reverse()
        },
        echartsInit () {
            this.echartsData.forEach((v, i) => {
                let echarts = this.$echarts.init(document.getElementById(`charts${i}`))
                echarts.setOption(v.options)
            })
        },
        getData(args) {
            let params = {...this.searchParams, ...this.sortParams}
            params.perPage = this.per_page
            params.page = this.current_page
            this.loading = true
            this.$axios.get(`/api/user/agent_statistics`, {
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.loading = false
                    this.total = res.data.page.total
                    this.tableData = res.data.data
                } else {
                    this.loading = false
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {
                this.loading = false
            })
        },
        addFilterCondition(item) {
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.props,
                key: Date.now()
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        removeDomain(item) {
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
                    let params = {}
                    props.forEach(v => {
                        params[v.parameter] = v.value
                    })
                    this.$refs['table'].clearSort()
                    this.searchParams = params
                    this.getData()
                    this.showFilterCondition = false
                    this.showFilter = false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.conditionForm.condition = []
            this.$refs['table'].clearSort()
            this.searchParams = {}
            this.sortParams = {}
            this.getData()
            this.showFilterCondition = false
            this.showFilter = false
        },
    }
}
</script>

<style lang="less">
.el-main {
    padding-right: 0;
}
.top-show {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .after {
        display: inline-block;
        color: #333;
        padding-left: 20px;
        position: relative;
        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: #097CFF;
        }
        &.unfinish-order {
            &::after {
                background-color: #FFAB2E;
            }
        }
        &.rework-order {
            &::after {
                background-color: #78808A;
            }
        }
        &.time-order {
            &::after {
                background-color: #FF2E7C;
            }
        }
        &.reject-rate {
            &::after {
                background-color: #8A919A;
            }
        }
        &.rework-rate {
            &::after {
                background-color: #FF2E7C;
            }
        }
    }
    .left {
        flex: 7;
        text-align: center;
    }
    .right {
        text-align: center;
        flex: 2
    }
}
.charts-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    .agent-name-wrap {
        flex: 0 0 50px;
        height: 160px;
        line-height: 160px;
        font-weight: bold;
        color: #333;
        text-align: right;
    }
    .echarts-container {
        flex: 1;
        .echarts-item {
            height: 160px;
            width: 100%;
        }
    }
}


.select-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.first-wrap {
    position: relative;
    padding-top: 50px;
    max-height: calc(100vh - 200px);
    padding-top: 50px;
    .charts-wrap {
        max-height: calc(100vh - 250px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}
.select-line {
    /deep/.ivu-poptip-inner {
        min-width: 450px;
        // height: 300px;
        overflow-y: scroll;
    }

    /deep/.poptip-condition .ivu-poptip-inner {
        min-width: 180px;
    }

    .demo-dynamic {
        padding-left: 10px;

        .el-form-item {
            margin-bottom: 12px;
        }

        .el-input {
            width: 240px;
        }

        .el-date-editor {
            width: 240px;
        }

        .el-button {
            padding: 9px 15px;
            vertical-align: baseline;
        }

        .el-form-item__error {
            padding-top: 0;
        }
    }

    .poptip-condition {
        display: block;
        margin-top: 10px;

        .poptip-condition-item {
            line-height: 25px;
            cursor: pointer;
        }

        .poptip-condition-add {
            font-size: 14px;
        }
    }

    .btns {
        margin-top: 10px;
    }
    .el-select {
        width: 240px;
    }
}
</style>
